<template>
  <div id="contact" style="overflow-y: scroll; height: 100vh; /* 设置容器高度为视口高度 */">
    <Header />
    <main class="main-content">
      <div class="img_container">
        <img src="@/assets/picture/addressBack.png"  class="footer-logo" />
      </div>
      <div class="contact-container">
        <span class="title-tabs">联系我们</span>
        <span class="location-tabs">联系方式</span>
      </div>

      <div class="corporate-office">
        <!-- 主内容部分：文字和图片 -->
        <div class="main-section">
          <!-- 左侧文字内容 -->
          <section class="info-section">
            <h1>公司办公室</h1>
            <div class="company-info">
              <h2>应用材料公司</h2>
              <p>3050 Bowers Avenue</p>
              <p>P.O. Box 58039</p>
              <p>Santa Clara, CA 95054-3299</p>
              <p>United States</p>
              <p><strong>Phone:</strong> +1-408-727-5555</p>
            </div>
          </section>

          <!-- 右侧图片 -->
          <section class="image-section">
            <img
                src="@/assets/picture/addressBack.jpg"
            />
          </section>
        </div>

        <!-- 添加分割线 -->
        <hr class="divider" />

        <!-- 下方额外信息 -->
        <section class="details-section">
          <div class="details-item">
            <h3>Careers</h3>
            <p>
              For assistance with careers or job search applications, please contact
              <a href="mailto:Careers@amat.com">Careers@amat.com</a>
            </p>
          </div>
          <div class="details-item">
            <h3>Customer Portal Assistance</h3>
            <p>
              If you are already a registered user of the My Applied: Customer Portal
              and/or in need of assistance with registration or other site
              functionality, please contact
              <a href="mailto:customer_portal@amat.com">customer_portal@amat.com</a>
            </p>
          </div>
        </section>

        <section class="details-section">
          <div class="details-item">
            <h3>Careers</h3>
            <p>
              For assistance with careers or job search applications, please contact
              <a href="mailto:Careers@amat.com">Careers@amat.com</a>
            </p>
          </div>
          <div class="details-item">
            <h3>Customer Portal Assistance</h3>
            <p>
              If you are already a registered user of the My Applied: Customer Portal
              and/or in need of assistance with registration or other site
              functionality, please contact
              <a href="mailto:customer_portal@amat.com">customer_portal@amat.com</a>
            </p>
          </div>
        </section>
      </div>
    </main>
    <Footer /> 
  </div>
</template>

<script>

import Footer from './Footer.vue';

export default {
  name: 'contact',
  components: {
    Footer,
  },
};
</script>

<style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}
.container {
  max-width: fit-content;
  margin: 0 auto;
  padding: 20px;
}
.main-content {
  padding: 40px -1px;
}
.img_container{
  padding: 0 0;
  margin-top: 5px;
  height: 480px;
}
.contact-container{
  background-color: #E1E1DF;
  color: #53565A;
  padding: 16px 0;
}
.title-tabs{
  padding: 0 300px;
}
.location-tabs{
  margin-left: 600px;
  color: #53565A;
}
.corporate-office {
  max-width: 1200px;
  margin: 100px auto;
  padding: 10px;
  font-family: Arial, sans-serif;
  color: #333;
  box-sizing: border-box;
}

/* 主内容布局 */
.main-section {
  display: flex;
  flex-wrap: wrap; /* 响应式调整 */
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.info-section {
  flex: 1;
  min-width: 300px;
}

.info-section h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.company-info {
  font-size: 1rem;
  line-height: 1.6;
}

.image-section {
  flex: 1;
  min-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-section img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 额外信息部分 */
.details-section {
  margin: 50px auto;
  display: flex;
  flex-wrap: wrap; /* 响应式布局 */
  justify-content: space-between;
  gap: 20px;
}

.details-item {
  flex: 1;
  min-width: 300px;
}

.details-item h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.details-item a {
  color: #0073e6;
  text-decoration: none;
}
</style>
